<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>选站</title>
    <link rel="stylesheet" href="../../libs/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../style/wap/index.css">
    <link rel="stylesheet" href="../../style/wap/station.css">

    <script src="../../libs/vue.js"></script>
    <script src="../../libs/jquery-3.2.1.min.js"></script>
    <script src="../../jsc/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="../../libs/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../libs/layer-v3.1.1/layer/layer.js"></script>
    <!--<script src="js/system.js"></script>-->
</head>
<body>
    <div class="C-container" id="select-site" v-cloak>
        <header-component></header-component>

        <main>
            <div class="content">
                <div class="station-title">
                    <a @click="toggleCity('','')">全国</a>
                    <a v-for="(item,index) in selectList" :data-id="item.id" @click="toggleCity(item.id,item.name)">> {{item.name}}</a>
<!--                    <a class="goTo" @click="goTo">进入当前行政站点</a>-->
                </div>

                <div class="station-item">
                    <a class="station-name" v-for="(item , index) in cityList" @click="toggleCity(item.id , item.name || item.sitename)">
                        <span v-if="selectList.length > 3">{{item.sitename}}</span>
                        <span v-else>{{item.name }}</span>
                    </a>
                </div>
                <button v-if="selectList.length" class="btn btn-block btn-danger">进入当前行政站点</button>
            </div>
        </main>

        <footer-component></footer-component>
    </div>

    <script src="../../jsc/common.js"></script>
    <script src="../../jsc/component_wap.js"></script>

    <script>
        var userAgent = navigator.userAgent.toLowerCase();
        var platform;
        if(userAgent == null || userAgent == ''){
            platform = 'WEB' ;
        }else{
            if(userAgent.indexOf("android") != -1 ){
                platform = 'ANDROID';
    //            location.href = "";
            }else if(userAgent.indexOf("ios") != -1 || userAgent.indexOf("iphone") != -1 || userAgent.indexOf("ipad") != -1){
                platform = 'IOS';
    //            location.href = "";
            }else if(userAgent.indexOf("windows phone") != -1 ){
                platform = 'WP';
    //            location.href = "";
            }else{
                platform = 'WEB' ;
                location.href = "../../index.html";
            }
        }
    </script>

    <script>

        var search = new Vue({
            el:"#select-site",
            data    : {
                siteList:['province','city','area','town','biotope'],

                province_id:"",             // 省级id
                city_id:"",                 // 市级id
                area_id:"",                 // 区级id
                result:"",                  // 最后结果

                selectList:[],                // 选中数据

                cityList:[],                // 城市数据
            },
            mounted(){
                var _th = this;
                this.province_id = parameter.id;
                this.getSubSite();
            } ,
            methods : {
                // 切换城市
                toggleCity(id,name){
                    var self = this;
                    for(var i=0; i<this.selectList.length; i++){
                        if( id == this.selectList[i].id ){
                            this.selectList.splice(i);
                        }
                    }
                    if(!id && !name){
                        this.selectList = [];
                    }else{
                        this.selectList.push({id:id,name:name});
                    }

                    this.getSubSite();
                },
                getSubSite(){
                    var data = {};
                    this.selectList.map(function(item,index){
                        switch( index ){
                            case 0:
                                data.province_id = item.id;
                                break;
                            case 1:
                                data.city_id = item.id;
                                break;
                            case 2:
                                data.area_id = item.id;
                                break;
                            case 3:
                                data.town_id = item.id;
                        }
                    })

                    axios.post(sysurl + '/common/areaFour' , data ).then(res => {
                        var datas = res.data;

                        if( datas.code === 1 ){
                            this.cityList = datas.data;
                        }else{
                            layer.msg(res.data.msg);
                        }
                    } , err => {}).catch(( error ) => {});
                },
                // 进入当前行政区域
                goTo(){
                    var station = this.selectList[this.selectList.length-1];
                    window.localStorage.setItem("station",JSON.stringify(station));
                    if(station.site_level == 5){
                        window.location.href = "./stationC.html";
                    }else{
                        window.location.href = "./stationB.html";
                    }
                }
            } ,
            filters : {} ,
        })

    </script>
</body>
</html>